<template>
  <div style="position: relative">
    <!--专场状态切换-->

    <div class="drop-down" @click="isShowDrop" :class="{shopDropDown:shopId}" v-if="!name">
      <span>专场<i class="icon icon-xia"></i></span>
    </div>
    <ul v-show="isShow" class="drop-option" :class="{showDropOption:shopId}">
      <li v-for="(item,index) in nav" :key="index" :class="{active:itemIndex==index}" @click.stop="toggleType(index,item.val)">
        <span>{{item.name}}</span></li>
    </ul>



    <!--日期导航-->
    <ul class="nav-date">
      <li v-for="(item,index) in weekList" :key="index"  :class="{active:weekIndex==index}" @click="weekActive(index,item.time)">
        <span>{{item.name}}</span><span>({{item.num}})</span>
      </li>
    </ul>

    <!--排序导航-->
    <ul class="sort">
      <li v-for="(item,index) in sortList" :key="index" :class="{active:sortIndex==index}" @click="sortActive(index,item.id)">
        <span>{{item.name}}</span>
      </li>
    </ul>

    <!--专场列表-->
    <special-list title="special" :specialList="specialList" :release="release"></special-list>

    <pagination :total="total" v-on:listenToChildEvent="getPageIndex"></pagination>

  </div>
</template>

<script>
  import Moment from 'moment';
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getStatusMapByKey} from '../../../assets/js/tools.js';
  import {getSpecialList,getWeekList} from '../../../assets/js/getData';
  export default {
    name: "productSpecial",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        shopId:null,
        name:null,
        specialList:[],//专场列表
        pageSize:10,//每页显示
        pageNum:1,//第几页
        total:null,//总页数
        type:'',//专场状态 12：竞拍中 11：预展中 20：已结束
        orderBy:1,//排序 1：综合排序 2：浏览次数 3：即将开拍
        time:Moment(new Date()).format('YYYY-MM-DD'),//查询哪天
        weekList:[],//星期列表
        sortList:[//排序导航列表
          {id:1,name:'综合排序'},
          {id:4,name:'浏览次数最多'},
          {id:5,name:'即将结拍'},
        ],
        weekIndex:1,
        sortIndex:0,

        nav:[],//专场状态 12：竞拍中 11：预展中 20：已结束
        itemIndex:0,
        isShow:false,

        release:null,//专场状态，已发布

      }
    },
    created(){
      let eSpecialStatus = getStatusMapByKey('eSpecialStatus');
      let inAuction = eSpecialStatus['inAuction'];
      let inPreview = eSpecialStatus['inPreview'];
      let inOver = eSpecialStatus['inOver'];
      this.release =  eSpecialStatus['release'].val;//已发布
      this.nav = [inAuction,inPreview,inOver];
      this.type = inAuction.val;

      this.shopId = this.$route.query.shopId;
      this.name = this.$route.query.keyword;

      this.getWeekList(this.type);
      this.getSpecialList();

      Moment.locale('zh-cn',{
        weekdays : [
          "周日", "周一", "周二", "周三", "周四", "周五", "周六"
        ]
      });
    },
    methods:{
      isShowDrop(){
        this.isShow = !this.isShow;
      },
      toggleType(index,id){
        this.isShow = !this.isShow;
        this.itemIndex = index;
        this.type = id;
        this.weekIndex = 1;
        this.time = Moment(new Date()).format('YYYY-MM-DD');
        this.getWeekList(this.type);
        this.getSpecialList();
      },
      getPageIndex(pageIndex){
        this.pageNum = parseInt(pageIndex);
        this.getSpecialList();
      },
      weekActive(index,time){
        this.weekIndex = index;
        this.time = time;
        this.getSpecialList();
      },
      sortActive(index,id){
        this.sortIndex = index;
        this.orderBy = id;
        this.getSpecialList();
      },
      // 获取专场列表
      async getSpecialList(){
        let data = {
          name:this.name,
          status:this.type,
          shopId:this.shopId,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          currentTime:this.time,
          orderBy:this.orderBy,
          productSize:8,
        };
        let res = await getSpecialList(data);
        if(res.data.reqResult.code>0){
          this.specialList = res.data.data;
          console.log(this.specialList);
          this.total = Math.ceil(res.data.total/this.pageSize);
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //获取星期列表
      async getWeekList(type){
        let params = {
          shopId:this.shopId,
          status:type,
        };
        let res = await getWeekList(params);
        if(res.data.reqResult.code>0){
          let data = res.data.data;

          let currentTime = new Date();
          let arr = new Array(7);
          let time = '';
          let week = '';
          if(!res.data.hasOwnProperty('data')){
            for(let i=0;i<arr.length;i++){
              time = Moment(currentTime).add(i,'days').format('YYYY-MM-DD');
              week = Moment(currentTime).add(i,'days').format('dddd');
              if(i==0){
                arr[i] = {time:time,name:'今天',num:0};
              }else if(i==1){
                arr[i] = {time:time,name:'明天',num:0};
              }else {
                arr[i] = {time:time,name:week,num:0};
              }
            }
            arr.unshift({time:null,name:'全部',num:0});
            this.weekList = arr;
            return;
          }
          for(let i=0;i<arr.length;i++){
            time = Moment(currentTime).add(i,'days').format('YYYY-MM-DD');
            week = Moment(currentTime).add(i,'days').format('dddd');
            if(i==0){
              arr[i] = {time:time,name:'今天',num:data['day'+i]};
            }else if(i==1){
              arr[i] = {time:time,name:'明天',num:data['day'+i]};
            }else {
              arr[i] = {time:time,name:week,num:data['day'+i]};
            }
          }
          arr.unshift({time:null,name:'全部',num:data.allday});
          this.weekList = arr;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
    }
  }
</script>

<style scoped>
  /*专场状态切换*/
  .drop-down{
    width: 33.3333333333333%;
    background-color: #ffffff;
    position: fixed;
    left: 33.3333333333333%;
    top: 0;
    z-index: 999;
    text-align: center;
  }
  .drop-down:after{
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
    height: 1px;
    background: #E5E5E5;
  }
  .drop-down>span{
    font-size: 0.8rem;
    padding: 0 1rem;
    display: inline-block;
    height: 2rem;
    line-height: 2rem;
    box-sizing: border-box;
    color: #C50000;
    border-bottom: 2px #C50000 solid;
  }
  .drop-down .icon-xia{
    color: #C50000;
  }
  .drop-option{
    position: fixed;
    top: 2rem;
    width: 100%;
    background: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
    z-index: 99;
  }
  .drop-option.showDropOption{
    position: absolute;
    top: 0;
  }
  .drop-option li{
    height: 2.2rem;
    line-height: 2.2rem;
    color: #282828;
    border-bottom: 1px solid #F2F2F2;
    padding-left: 1.2rem;
    font-size: 0.7rem;
  }
  .drop-option li:last-child{
    border-bottom: none;
  }
  .active>span{
    color: #c40002 !important;
  }
  .drop-down.shopDropDown{
    position: absolute;
    top: -2rem;
  }


/*日期导航*/
  .nav-date{
    display: flex;
    justify-content: space-around;
    padding-top: 0.75rem;
  }
  .nav-date li{
    display: flex;
    flex-direction: column;
    font-size: 0.6rem;
    color: #999;
    text-align: center;
  }
  .nav-date li.active{
    color: #C50000;
  }
  /*排序导航*/
  .sort li{
    color: #999;
  }
</style>
